// index.js

const puppeteer = require('puppeteer');
const fs = require('fs').promises;
const path = require('path');
const { ensureDir } = require('fs-extra');

const defaultTemplate = async (options) => `
<!DOCTYPE html>
<html>
<head>
    <style>
        @font-face {
            font-family: 'Minecraft';
            src: url(data:font/truetype;charset=utf-8;base64,${await fs.readFile(options.fontPath, 'base64')}) format('truetype');
        }

        body {
            margin: 0;
            width: ${options.width}px;
            height: ${options.height}px;
            background: url(data:image/png;base64,${await fs.readFile(options.background, 'base64')}) no-repeat;
            background-size: 100% 100%;  
            background-color: transparent; /* 确保背景色为透明 */
            display: flex;
            flex-direction: row; /* 横向排列 */
            align-items: center; /* 垂直居中 */
            padding: 20px 30px 20px 30px;
            box-sizing: border-box;
        }

        .icon {
            width: 200px;
            height: 200px;
            margin-right: 40px;
            ${options.icon.startsWith('#') ? `background: ${options.icon}` : `background: url(${options.icon})`};
            background-size: contain;
        }

        .text-container {
            flex: 1;
            color: #FFFFFF;
            font-family: 'Minecraft', sans-serif;
            text-shadow: 2px 2px #3F3F3F;
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* 上下排列，确保 title 和 description 分开 */
            height: 81%; /* 确保内容撑满 */
            align-items: flex-end; /* 右对齐 */
        }

        .title {
            font-size: 72px;
            margin-bottom: 0;
            color: #FCFC00;
            align-self: flex-start; /* 右上角 */
        }

        .description {
            font-size: 72px;
            opacity: 0.8;
            align-self: flex-start; /* 右下角 */
        }
    </style>
</head>
<body>
    <div class="icon"></div>
    <div class="text-container">
        <div class="title">${options.title}</div>
        <div class="description">${options.description}</div>
    </div>
</body>
</html>
`;



/**
 * 生成 Minecraft 风格成就图片
 * --------------------------------------------------
 * @param {Object} config - 配置对象
 * @param {string} config.title - 成就标题（黄色大字，例如"终极成就!"）
 * @param {string} config.description - 成就描述（白色小字，例如"获得所有物品"）
 * @param {string} config.icon - 图标资源，根据 iconMode 决定是本地路径还是 base64
 * @param {'path'|'base64'} [config.iconMode='path'] - 图标模式：path=本地文件路径，base64=直接传入base64数据
 * @param {string} [config.savePath='./output'] - 图片输出目录路径（默认当前目录下的output文件夹）
 * @returns {Promise<string>} 返回生成图片的完整保存路径
 * @throws {Error} 渲染失败时抛出异常
 * 
 * @example
 * renderAmentImage({
 *   title: "矿工大师!",
 *   description: "挖掘1000块钻石矿",
 *   icon: './diamond.png',
 *   savePath: './achievements'
 * });
 */
async function renderAmentImage({
    title,
    description,
    icon,
    iconMode = 'path',
    savePath = './output'
}) {
    try {
        // 1. 启动无头浏览器实例
        // const browser = await puppeteer.launch();
        const browser = await puppeteer.launch({
            args: ['--disable-gpu', '--no-sandbox', '--disable-setuid-sandbox']
        });
        const page = await browser.newPage();
        
        // 2. 加载本地资源路径（背景图 + 字体）
        const backgroundPath = path.join(__dirname, 'assets', 'AdvancementMade_BG.png');
        const fontPath = path.join(__dirname, 'assets', 'Minecraft_AE.ttf');
        
        // 3. 动态生成 HTML 模板（关键步骤）
        const html = await defaultTemplate({
            title,
            description,
            // 根据模式转换图标为 base64 或直接使用传入值
            icon: iconMode === 'path' 
                ? `data:image/png;base64,${await fs.readFile(icon, 'base64')}` 
                : icon,
            width: 1280,       // 固定画布宽度（匹配原版成就尺寸）
            height: 256,       // 固定画布高度
            background: backgroundPath,
            fontPath
        });

        // 4. 将 HTML 加载到浏览器页面
        await page.setContent(html);
        // 设置视口与画布尺寸一致，避免缩放
        await page.setViewport({ width: 1280, height: 256 });

        // 5. 确保输出目录存在（自动创建不存在的目录）
        await ensureDir(savePath);
        // 生成唯一文件名（时间戳命名避免重复）
        const outputPath = path.resolve(savePath, `${Date.now()}.png`);
        
        // 6. 截图操作核心配置
        await page.screenshot({
            path: outputPath,
            omitBackground: true,  // 启用透明背景
            fullPage: true         // 必须开启以包含完整动态内容
        });

        // 7. 关闭浏览器释放资源
        await browser.close();
        return outputPath;
    } catch (err) {
        // 统一错误处理（包含原始错误信息）
        throw new Error(`渲染失败: ${err.message}`);
    }
}

module.exports = renderAmentImage;